<!-- 玩家封禁列表 -->
<template>
  <el-dialog :modelValue="show" title="玩家封禁列表" width="65%" top="12vh" :close-on-click-modal="false"
    :close-on-press-escape="false" :destroy-on-close="true" @close="handleClose">
    <SearchTable :query="data.query" :list="data.tableData" :total="data.total" @changeSize="changeSize" @changePage="changePage"
      @search="getSearchList">
      <template #form>
        <el-form-item label="平台ID：">
          <el-input v-model="data.query.user_id" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="风控类型：">
          <el-select v-model="data.query.ban_type" placeholder="请选择" filterable>
            <el-option v-for="item in data.banList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="封禁时间：">
          <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" clearable :disabled-date="indexStore.disabledDateTime"/>
        </el-form-item>
      </template>
      <template #button></template>
      <template #table>
        <template v-for="(item, index) in data.fields" :key="index">
          <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width">
            <template v-if="item.prop == 'account3d_id'" #default="scope">
              {{ scope.row.account3d }}
            </template>
            <template v-if="item.prop == 'agent_id'" #default="scope">
              {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
            </template>
            <template v-if="item.prop == 'ban_type'" #default="scope">
              <el-tag type="warning">{{ selectToLabel(data.banList, scope.row.ban_type) }}</el-tag>
            </template>
          </el-table-column>
        </template>
      </template>
    </SearchTable>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, watch } from 'vue'
import { getBanPlayer } from '@/api/player'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import { selectToLabel } from '@/utils/index'
import { getDateDay, setTimeValue } from '@/utils/time'
import { useStore } from '@/stores/index'
const indexStore = useStore()
const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  }
})
watch(
  () => props.show,
  async (val) => {
    if (val) {
      getSearchList()
    }
  }
)
const data = reactive({
  query: {
    page: 1,
    size: 50,
    user_id: '',
    ban_type: -1,
    date: [getDateDay(0), getDateDay(0)]
  },
  banList: [
    { label: '全部', value: -1 },
    { label: '正常用户', value: 1 },
    { label: '封禁登录', value: 2 }
  ],
  tableData: [],
  total: 0,
  fields: [
    { label: '平台昵称', prop: 'account3d_id', width: '200', visible: true },
    { label: '商户昵称', prop: 'agent_id', width: '200', visible: true },
    { label: '风控类型', prop: 'ban_type', width: '120', visible: true },
    { label: '封禁时间', prop: 'created_at', width: '180', visible: true },
    { label: '封禁理由', prop: 'reason', width: '', visible: true }
  ],
  userInfo: {},
  reasonBan: '',
  banType: 1,
  isBanShow: false
})

const getSearchList = async () => {
  data.query = setTimeValue(data.query)
  let res = await getBanPlayer(data.query)
  data.tableData = res.data.list
  data.total = res.data.total
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}

const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置
const emit = defineEmits(['onHideDetails'])
const handleClose = async () => {
  emit('onHideDetails', false)
}
</script>

<style scoped lang="scss"></style>
